<template>
    <el-container class="contain-box">
        <!-- 头部区域 -->
        <el-header class="contain-header">
            <div class="header-left">
                <img src="../assets/avatar.jpg" alt="" />
                <span>电商管理后台</span>
            </div>
            <div class="header-right">
                <el-button type="info" @click="logout()">退出</el-button>
            </div>
        </el-header>
        <el-container>
            <!-- 侧边栏 -->
            <el-aside :width="isclollapse ? '70px' : '250px'">
                <!-- 侧边栏的折叠与展开 -->
                <div class="togglelist" @click="toggle()">|||</div>
                <el-menu
                    mode="vertical"
                    background-color="#936068"
                    text-color="#fff"
                    active-text-color="#409EFF"
                    unique-opened
                    :collapse="isclollapse"
                    :collapse-transition="false"
                    :router="true"
                    :default-active="activestatus"
                >
                    <!-- index 只接收字符串 最简单的方式就是拼接一个空字符串 -->
                    <el-submenu
                        :index="item.id + ''"
                        :key="item.id"
                        v-for="item in menuitem"
                    >
                        <!-- 一级菜单模板区域 -->
                        <template slot="title">
                            <i :class="iconlist[item.id]"></i>
                            <span class="one-name">{{ item.authName }}</span>
                        </template>

                        <!-- 二级菜单 -->
                        <!-- 用一级菜单的 item 来获取子菜单-->
                        <el-menu-item
                            :index="'/' + subitem.path"
                            v-for="subitem in item.children"
                            :key="subitem.id"
                            @click="savestatus('/' + subitem.path)"
                        >
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span>{{ subitem.authName }}</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <!-- 内容主体 -->
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
export default {
  data: function () {
    return {
      // 侧边栏数据
      menuitem: [],
      // 字体图标数据
      iconlist: {
        125: 'iconfont icon-users',
        103: 'iconfont icon-3702mima',
        101: 'iconfont icon-shangpin',
        102: 'iconfont icon-danju',
        145: 'iconfont icon-baobiao'
      },
      isclollapse: false,
      activestatus: ''
    }
  },
  methods: {
    logout: function () {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    toggle: function () {
      this.isclollapse = !this.isclollapse
      console.log(this.isclollapse)
    },
    getMenuItem: async function () {
      const { data: res } = await this.$http.get('menus')
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.menuitem = res.data
    },
    savestatus: function (status) {
      //   console.log(status)
      window.sessionStorage.setItem('status', status)
      // 获取点击了的链接的状态
      this.activestatus = status
    }
  },
  created: function () {
    this.getMenuItem()
    this.activestatus = window.sessionStorage.getItem('status')
    // 页面一开始就 获取左侧菜单栏的数据
    // console.log(res.data)
    // 将数据赋值给 menuitem
  }
}
</script>
<style lang="less" scoped>
.contain-box {
    height: 100%;
}
.el-container {
    padding: 0px;
    height: 100%;
    overflow: hidden;
}
.contain-header {
    display: flex;
    background-color: #e76885;
    justify-content: space-between;
    padding-left: 0px;
    height: 50px;
    > .header-left {
        display: flex;
        align-items: center;
        > img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-left: 10px;
        }
        > span {
            color: aliceblue;
            font-size: 20px;
            margin-left: 10px;
        }
    }
    > .header-right {
        display: flex;
        align-items: center;
    }
}
.el-aside {
    background-color: #936068;
    // vh 表示能见度为 100 减去顶部的 50px
    height: calc(100vh - 50px);
    // position: fixed;
    .one-name {
        margin-left: 5px;
    }
    .el-menu {
        border-right: none;
    }
}
.togglelist {
    height: 30px;
    font-size: 19px;
    line-height: 30px;
    text-align: center;
    // 字体间的距离
    letter-spacing: 3px;
    cursor: pointer;
}
.el-main {
    padding-bottom: 0px;
    background: url(../assets/welcom.png) no-repeat;
    background-size: auto;
    background-attachment: fixed;
    height: calc(100vh - 50px);
    // 外层设置隐藏滚动条 内层设置自动
    overflow: auto;
    padding-right: 17px;
}
</style>
